<template>
  <div>
    <div v-html="payform" ref="payform" ></div>
    <el-table
      :data="
        tableData? tableData.slice(
              (currentPage - 1) * pagesize,
              currentPage * pagesize
            )
          : []
      "
      style="width: 100%"
    >
    
      <el-table-column prop="ownerName" label="业主名" width="180">
      </el-table-column>
      <el-table-column prop="createTime" value-format="yyyy-MM-dd" label="缴费时间" width="180">
      </el-table-column>
      <el-table-column prop="feeStatus" label="缴费状况">
        <template slot-scope="scope">
          <el-tag :type="scope.row.feeStatus=='0'?'danger':'success'">
            {{ scope.row.feeStatus=='0'?'未缴费':'已缴费'}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="houseNum" label="房屋编号"> </el-table-column>
      <el-table-column prop="feePerson" label="缴费人"> </el-table-column>
      <el-table-column prop="totalWaterFee" label="水费余额"> </el-table-column>
      <el-table-column label="操作">
        <template slot="header" slot-scope="{}">
          <el-input v-model="search" size="mini" placeholder="搜索" clearable @change="searchfun()" />
        </template>
        <template slot-scope="scope">
          <el-button
            type="primary"
            round
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
            >缴纳水费</el-button
          >
          <el-button
            size="mini"
            round
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
    @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[4, 8, 12, 16]"
      :page-size="pagesize"
      class="pagination"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length"
    >
    </el-pagination>
    <el-dialog
      title="您确定要缴费嘛？"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-input v-model="inputval" placeholder="请输入您要缴费的金额"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="fun">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script>
import { waterfee,delwater,paywater } from "@/apis/fzy/fzylink.js";
export default {
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      inputval: "",
      index: "",
      search:"",
      value: "已缴费",
      currentPage: 1,
      pagesize: 8,
      id:'',
      ownid:'',
      payform:''
    };
  },
  mounted() {
    waterfee().then((ok) => {
      console.log(ok);
      this.tableData = ok.data.data;
    });
  },
  methods: {
    searchfun() {
      console.log(this.search)
      waterfee(this.search).then((ok)=>{
        console.log(ok);
        this.tableData = ok.data.data;
      })
    },
    handleSizeChange(pagesize) {
      this.pagesize = pagesize;
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    },
    handleEdit(index, row) {
      console.log(row);
      this.dialogVisible = true;
      this.index = index;
      this.id=row.id
      this.ownid=row.ownId
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          delwater(row.id).then((ok) => {
            console.log(ok);
            this.$router.go(0)
          })
           
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    fun() {
      (this.dialogVisible = false)
      console.log(this.inputval);
      console.log(this.id);
      paywater(this.inputval,this.id).then((ok)=>{
        console.log(ok);
        if(ok.data.code==200){
      this.payform=ok.data.data
      }
      this.$nextTick(()=>{
        //获得vue对象关联的payform对象(this.$refs.payform)，获得它的第一个子节点(children[0])，即为form标签，调用表单提交方法(submit())
          this.$refs.payform.children[0].submit();
      });
    
    })
    },
  },
};
</script>

<style scoped lang="scss">
.pagination {
  float: right;
}
</style>